<template>
  <div class="workContent">
    <div class="workItem" @click="distributionMap(xtmkArr[index], index)" v-for="(item, index) in datalist" :key="index">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == index ? 'active'  : '']">{{iconList[index]}}</text>
      <text class="text" :class="[activeIndex == index ? 'active'  : '']">{{item}}</text>
    </div>
    <div class="workItem" @click="distributionMap('安装工单', 4)">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 4 ? 'active'  : '']">{{iconList[1]}}</text>
      <text class="text" :class="[activeIndex == 4 ? 'active'  : '']">安装工单</text>
    </div>
    <div class="workItem" @click="distributionMap('安装协议', 5)">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == 5 ? 'active'  : '']">{{iconList[1]}}</text>
      <text class="text" :class="[activeIndex == 5 ? 'active'  : '']">安装协议</text>
    </div>
  </div>
</template>
<script>
import { addIconFontSupport, getIconFontPath } from '@/config/iconConfig.js';
import Config from '@/config/projectIconConfig.js';
import { getCache } from '@/util/storageUtils';
import { CTCE_DATALIST } from '@/config/storageTypes';
const dom = weex.requireModule('dom');
export default {
  name: 'projectContent',
  data () {
    return {
      pIndexKey:'',
      iconList: Config.projectIcon,
      datalist: [],
      xtmkArr: [],
      activeIndex: null
    }
  },
  created () {
    getCache(CTCE_DATALIST).then(res => {
      this.data = JSON.parse(res)
      for (let i = 0, len = this.data.length; i < len; i++) {
        if(this.data[i].DISPMKXZ === '01'){
          this.datalist.push(this.data[i].TITLE)
          this.xtmkArr.push(this.data[i].XTMK)
        }
      }
    })
    addIconFontSupport(dom, "../../");
  },
  methods: {
    distributionMap (XTMK_Id, index) {
      this.activeIndex = index;
      switch(XTMK_Id) {
        case '1302': // 工程进度汇总统计
          this.$router.open({
            name: 'summary',
            navTitle: '工程进度汇总'
          })
        break;
        case '1310': // 安装设备分类统计
          this.$router.open({
            name: 'equipType'
          })
        break;5
        case '1311': // 厂家完成情况统计
          this.$router.open({
            name: 'comHome',
            navTitle: '厂家完成情况统计'
          })
        break;
        case '1312': // 厂家设备安装统计
          this.$router.open({
            name: 'equipInstall'
          })
        break;
         case '安装工单': // 安装工单
          this.$router.open({
            name: 'workList'
          })
        break;
        case '安装协议': // 安装协议
          this.$router.open({
            name: 'protocols'
          })
        break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../config/styles";

.workContent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 50px;
  @include border(1px, solid, $--theme-border, top);
}
.workItem{
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0;
  @include border(1px, solid, $--theme-border, right);
  @include border(1px, solid, $--theme-border, bottom);
}
.active{
  color: rgba(62,175,252,1);
}
.text{
  font-size:29.1px;
  font-family:PingFangSC-Semibold;
  color:rgba(151,151,151,1);
  padding-top: 23px;
}
.icon-text {
  font-size: 70px;
  color: rgba(204,204,204,1);
}
</style>

